<template>
  <el-container>
    <el-header>
      <div class="report_header" ref="headerHeight">
        <div class="report_header_left"></div>
        <div
          style="
            width: 300px;
            display: flex;
            align-items: center;
            margin-left: 10px;
          "
        >
          <svg-icon class="primary" :icon-class="$route.meta.icon" />
          <span style="margin-left: 5px" class="primary">{{
            $route.meta.title
          }}</span>
        </div>
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            width: 100%;
          "
        >
          <div
            style="
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              overflow: hidden;
              height: 41px;
            "
          >
            <div class="report_header_query">
              <el-input
                prefix-icon="el-icon-search"
                placeholder="名称"
                v-model="query.name"
              ></el-input>
            </div>
          </div>
          <el-button
            style="margin-left: 10px; margin-top: 5px"
            size="small"
            type="primary"
            @click="queryNavigation"
             v-permission="['recommend.add']"
            >查询</el-button
          >
          <!-- <el-button
            style="margin-left: 10px; margin-top: 5px"
            size="small"
            type="primary"
            @click="addClick"
            v-permission="['recommend.add']"
            >新增</el-button
          > -->
        </div>
      </div>
    </el-header>
    <div class="pd10">
      <el-table
        :data="recommendTagList"
        border
        stripe
        :height="curHeight"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
          fixed
        >
        </el-table-column>
        <el-table-column label="标签名称" prop="name"> </el-table-column>
        <!-- <el-table-column label="地址" prop="areaName"> </el-table-column> -->
        <el-table-column label="类型" width="100" align="center">
          <template slot-scope="scope">
            <el-tag type="success">
              <span>{{ scope.row.type | watchType }}</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="关联" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="relevance(scope.row)">关联</el-button>
          </template>
        </el-table-column>

        <el-table-column
          label="排序"
          align="center"
          width="80"
          prop="orders"
          :render-header="ordersIcons"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.orders"
              @blur="bulrOrders(scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="80">
          <template slot-scope="scope">
            <div>
              <el-tooltip
                v-permission="['recommend.del']"
                class="item"
                effect="dark"
                content="删除"
                placement="top-start"
              >
                <a
                  style="margin-left: 10px"
                  @click="deleteNavigation(scope.row)"
                >
                  <i style="color: #f56c6c" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-table
        :data="navigationForm"
        border
        stripe
        :height="curHeight"
        style="width: 100%"
      >

        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
          fixed
        >
        </el-table-column>
        <el-table-column label="名称" prop="name"> </el-table-column>
        <el-table-column label="商家" prop="mchName"> </el-table-column>
        <el-table-column label="地址" prop="areaName"> </el-table-column>
        <el-table-column label="类型" width="100" align="center">
          <template slot-scope="scope">
            <el-tag type="success">
              <span>{{ scope.row.type | watchType }}</span>
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          label="排序"
          align="center"
          width="80"
          prop="orders"
          :render-header="ordersIcons"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.orders"
              @blur="bulrOrders(scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="80">
          <template slot-scope="scope">
            <div>
              <el-tooltip
                v-permission="['recommend.del']"
                class="item"
                effect="dark"
                content="删除"
                placement="top-start"
              >
                <a
                  style="margin-left: 10px"
                  @click="deleteNavigation(scope.row)"
                >
                  <i style="color: #f56c6c" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table> -->
      <el-dialog :title="tagName" :visible.sync="dialogFormVisible" @close="dialogClose"	>
        <el-container>
          <el-main class="popup_content">
            <el-form
              ref="addForm"
              :model="addForm"
              :rules="rules"
              label-width="80px"
              size="mini"
            >
              <el-form-item label="推荐类型" prop="type">
                <el-select
                  v-model="addForm.type"
                  placeholder="请选择"
                  @change="changesadd"
                >
                  <!-- :filter-method="remoteMethod"
                  :loading="loading" -->
                  <el-option label="商品" value="0"></el-option>
                  <el-option label="名店" value="1"></el-option>
                  <!-- <el-option label="酒店" value="2"></el-option> -->
                  <el-option label="名厨" value="3"></el-option>
                  <!-- <el-option label="餐车" value="4"></el-option> -->
                </el-select>
              </el-form-item>
              <el-form-item label="选择店铺" v-if="addForm.type == 0">
                <el-select
                  v-model="shopName"
                  placeholder="请选择"
                  @change="changeselect"
                  :filter-method="remoteMethodtwo"
                  :loading="loading"
                  filterable
                   value-key="id"
                >
                  <el-option
                    v-for="item in linklist"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="推荐内容" prop="typeId">
                <el-select
                  v-model="name"
                  :filter-method="remoteMethod"
                  :loading="loading"
                  filterable
                  value-key="id"
                  @change="changetwo"
                  placeholder="请输入关键词"
                >
                  <el-option
                    v-for="item in linkForm"
                    :key="item.id"
                    :label="item.name"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
        <div>
        <!-- <div slot="footer" class="dialog-footer"> -->
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            :loading="clicked"
            @click="saveNavigation('addForm')"
            >确 定</el-button>
        </div>
         <el-table
        :data="relevanceList"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
          fixed
        >
        </el-table-column>
           <el-table-column label="关联名称" prop="name"></el-table-column>
           <el-table-column label="所属商家" prop="mchName"></el-table-column>
           <!-- <el-table-column label="地址" prop="areaName"> </el-table-column> -->
           <el-table-column label="关联类型" width="100" align="center">
             <template slot-scope="scope">
               <el-tag type="success">
                 <span>{{ scope.row.type | watchType }}</span>
               </el-tag>
             </template>
           </el-table-column>
           <el-table-column label="店铺状态" width="100" align="center">
             <template slot-scope="scope">
                 <el-tag :type="scope.row.status | statusTagFilter">{{ scope.row.status | watchStatus }}</el-tag>
             </template>
           </el-table-column>
           <el-table-column
          label="排序"
          align="center"
          width="80"
          prop="orders"
          :render-header="ordersIcons"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.orders"
              @blur="bulrOrders(scope.row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="80">
          <template slot-scope="scope">
            <div>
              <el-tooltip
                v-permission="['recommend.del']"
                class="item"
                effect="dark"
                content="删除"
                placement="top-start"
              >
                <a
                  style="margin-left: 10px"
                  @click="deleteNavigation(scope.row)"
                >
                  <i style="color: #f56c6c" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-footer class="el-footerBox" style="height: 66px !important;">
        <pagination
          v-show="relevanceTotal > 0"
          :total="relevanceTotal"
          :page.sync="relevancePageNum"
          :limit.sync="relevancePageSize"
          @pagination="getrelevanceList"
        ></pagination>
      </el-footer>
      </el-dialog>
    </div>
    <el-footer class="el-footerBox">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="getlist"
      ></pagination>
    </el-footer>
  </el-container>
</template>
<script>
import { list as shoplist } from "@/api/shop";
import { list as tagList } from "@/api/tag";
import Pagination from "@/components/Pagination";
import permission from "@/directive/permission/index.js";
import { list, save, del, find, update } from "@/api/recommend";
import { list as recommendList, save as recommendSave} from "@/api/recommendTag";
import { list as product } from "@/api/product";
import { mchList } from "@/api/shop";
import { list as cheflist } from "@/api/kitchen";
export default {
  directives: { permission },
  components: { Pagination },
  data() {
    return {
      shopName: "",
      shopNamelist: {},
      name: "",
      query: {
        id: "",
        name: "",
      },
      pageNum: 1,
      pageSize: 20,
      addForm: {
        type:'',
        typeId:''
      },
      linkForm: [],
      linklist:[],
      total: 0,
      loading: false,
      scopeType:'',
      dialogFormVisible: false,
      curHeight: null,
      rules: {},
      clicked: false,
      classType: "",
      navigationForm: [],
      sorting: {
        orders: "",
        id: "",
      },
      orders: 0,
      pageNums: 1,
      pageSizes: 20,
      keyword: { name: "" },
      adName:'',
      productName:'',
      recommendTagList:[],
      relevanceList:[],
      relevanceTotal:100,
      relevancePageNum: 1,
      relevancePageSize: 20,
      tagName:"",
      selectTagId:"" //被选中推荐标签的id
    };
  },
  created() {
    this.getlist();
    this.getRecommendTag()
  },
  activated(){
    console.info("我被显示了")
    this.getRecommendTag()
  },
  filters: {
    watchType(val) {
      let text = "";
      switch (val) {
        case 0:
          text = "商品";
          break;
        case 3:
          text = "名厨";
          break;
        case 1:
          text = "名店";
          break;
        case 10:
        text = "推荐";
        break;
      }
      return text;
    },
    statusTagFilter(val) {
      if (val == 1) {
        return 'success'
      } else {
        return 'info'
      }
    },
    watchStatus(val) {
      val = val.toString()
      if (val == 0) {
        return '待审核'
      } else if (val == 1) {
        return '已审核'
      } else if (val == 2) {
        return '已关闭'
      }else if (val == -1) {
        return '未知'
      }
    },
  },
  mounted () {
      this.comeIn();
    this.beforeMount();
  },
  methods: {
    // fcous(){
    //   this.adName='',
    //   this.billlist()

    // },
    changeselect(val) {
      this.shopName = val.name;
      this.enterpriseId = val.enterpriseId;
      console.log(val);
      this.adName = "";
      // console.log(this.value);
      this.product();

    },
    queryNavigation() {
      // console.log('a');
      // console.log('1231231231312312321312');
      this.keyword = this.query;
      this.pageNum = 1;
      this.getRecommendTag();
    },
    changetwo(val) {
      console.log(val);
      this.name = val.name;
      this.addForm.typeId = val.id;
    },
    //获取标签列表
    getRecommendTag(){
      let params = new URLSearchParams();
      params.append("pageNum", this.pageNum);
      params.append("pageSize", this.pageSize);
      params.append("type", 10);
      tagList(params)
        .then((response) => {
          this.recommendTagList = response.data.data
        })
        .catch((error) => {
          console.log("error!!");
        });
    },

    getrelevanceList() {
      // debugger
      let params = new URLSearchParams();
      params.append("pageNum", this.relevancePageNum);
      params.append("pageSize", this.relevancePageSize);
      params.append("tagIds", this.selectTagId);
      console.log("我发起请求了",this.selectTagId);
      recommendList(params)
        .then((response) => {
          // debugger
          this.relevanceList = response.data.data;
          this.relevanceTotal = response.data.total;
          this.relevanceList = response.data.data.map(e => {
            // debugger
            let item = e;
            if(e.shopVo){
              item.mchName = e.shopVo.name
            }else if(e.productVo){
              item.mchName = e.productVo.name
            }
            if(e.shopVo){
              item.status = e.shopVo.status
            }else{
              item.status = -1
            }
            return item
          })
          this.total = response.data.total;
          console.log(this.relevanceList);
        })
        .catch((error) => {
          console.log("error!!",error);
        });
    },
    getlist() {
      let params = new URLSearchParams();
      params.append("pageNum", this.pageNum);
      params.append("pageSize", this.pageSize);
      params.append("name", this.keyword.name);
      list(params)
        .then((response) => {
          this.navigationForm = response.data.data;
          this.total = response.data.total;
          console.log(this.navigationForm);
        })
        .catch((error) => {
          console.log("error!!");
        });
    },
    saveNavigation(addForm) {
      console.log("校验表单",this.addForm);
      console.log("校验表单",this.linkForm);

      this.$refs[addForm].validate((valid) => {
        if (valid) {
          // 校验表单
          this.clicked = true;
          let params = new URLSearchParams();
          let name = ""
          if(this.linkForm.length > 0){
            this.linkForm.map(item =>{
              if(item.id == this.addForm.typeId){
                name = item.name
              }
            })
          }

          console.log("",this.addForm);
          var addForm = {
            type: this.addForm.type,
            typeId: this.addForm.typeId,
            name: name,
          };
          console.log("",addForm);
          // params.append("recommend", addForm)
          params.append("tagId", this.selectTagId)
          recommendSave(addForm, params)
            .then((response) => {
              console.log(response);
              // this.dialogFormVisible = false;
              // this.orders=response.data.data.orders+1

              // console.log(addForm);
              this.clicked = false;
              this.getrelevanceList(this.selectTagId);
              //   this.dialogFormVisible = false;
              //   this.$message({
              //     message: response.content,
              //     offset: 120,
              //     center: true,
              //   });
            })
            .catch((error) => {
              this.clicked = false;
              console.log("error!!");
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    deleteNavigation(data) {
      console.log(data);
      var _this = this;
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del(data.id)
            .then((response) => {
              console.log(response);
              _this.navigationForm.forEach(function (item, index) {
                if (item.id == data.id) {
                  _this.navigationForm.splice(index, 1);
                }
              });
              _this.$message({
                message: response.content,
                offset: 120,
                center: true,
              });
              this.getrelevanceList();
            })
            .catch((error) => {
              console.log("error!!");
            });
        })
        .catch(() => {});
    },
    loadSHop(query) {
      this.addForm.typeId = "";
      let params = new URLSearchParams();
      params.append("pageNum", this.pageNums);
      params.append("pageSize", this.pageSizes);
       params.append("scopeType", 2);
       params.append('name',query)
       mchList(params)
        .then((res) => {
          console.log(res);
          this.linklist = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    billlist() {
      this.addForm.typeId = "";
      let params = new URLSearchParams();
      params.append("pageNum", this.pageNums);
      params.append("pageSize", this.pageSizes);
       params.append("name", this.adName);
       params.append("scopeType", this.scopeType);
       mchList(params)
        .then((res) => {
          console.log(res);
          this.linkForm = res.data.data;
          //   console.log(this.linkForm);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    shoplist() {
      let params = new URLSearchParams();
      params.append("name", this.productName);
      shoplist(params)
        .then((response) => {
          console.log(response);
          this.shopNamelist = response.data.data;

        })
        .catch((error) => {
          console.log("error");
        });
    },
    product() {
      let params = new URLSearchParams();
      params.append("pageNum", this.pageNums);
      params.append("pageSize", this.pageSizes);
      params.append("name", this.adName);
      params.append("enterpriseId", this.enterpriseId);
      product(params)
        .then((res) => {
          console.log(res);
          this.linkForm = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changesadd(val) {

      this.classType = val;
      this.name = "";
      this.pageNums = 1;
      this.pageSizes = 20;
      this.addForm.typeId = "";
      if (this.classType == 0) {
           this.loadSHop('')
        // this.product();
        // this.scopeType=2
        // this.billlist();
      } else if (this.classType == 1) {
        this.scopeType=2
        this.billlist();
      } else if (this.classType == 3) {
          this.scopeType=3
           this.billlist();
      }
    },
    //关闭弹窗的回调
    dialogClose(){
      console.info("弹窗关闭的回调--",this.tagName,this.selectTagId)
      this.tagName = ""
      this.selectTagId = ""
      console.info("弹窗关闭的回调--",this.tagName,this.selectTagId)
    },
    relevance(data) {
      console.info("打开关联弹窗--",data)
      this.dialogFormVisible = true;
      this.addForm.type=''
      this.name=''
      this.shopName=''
      this.tagName = data.name
      this.selectTagId = data.id
      this.getrelevanceList(this.selectTagId)
    },
    bulrOrders(data) {
      console.log(data);
      this.sorting.id = data.id;
      this.sorting.orders = data.orders;
      this.saveSorting();
    },
    saveSorting() {
      var _this = this;
      update(_this.sorting)
        .then((response) => {
          console.log(response);
          _this.navigationForm.forEach(function (item) {
            if (item.id == response.data.id) {
              item.orders = response.data.orders;
            }
          });
          _this.$message({
            message: response.content,
            offset: 120,
            center: true,
          });
        })
        .catch((error) => {
          console.log("error!!");
        });
    },
    ordersIcons(h, { column }) {
      const inReview = "点击下方数字区域可直接更改排序。";
      return h("div", [
        h("span", column.label),
        h(
          "el-tooltip",
          {
            props: {
              placement: "top",
            },
          },
          [
            h(
              "div",
              {
                slot: "content",
                style: {
                  width: "200px",
                  whiteSpace: "normal",
                  "margin-bottom": "10px",
                },
              },
              inReview
            ),
            h("i", {
              class: "el-icon-question",
              style: "color:#888888;margin-left:5px;position:absolute",
            }),
          ]
        ),
      ]);
    },
    remoteMethod(query) {
      console.log(query);
      this.adName = query;

        this.loading = true;
        setTimeout(() => {
          this.loading = false;

          if (this.classType == 0) {
            this.product();
          } else if (this.classType == 1) {
             this.scopeType=2
            this.billlist();
          } else if (this.classType == 3) {
             this.scopeType=3
           this.billlist();
           }
          //  else {
          //   this.linkForm = [];
          // }
        }, 200);

    },
    remoteMethodtwo(query){
      console.log(query);
      this.productName = query;

        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          if (this.classType == 0) {
            this.loadSHop(query);
          } else {
            this.shopNamelist = [];
          }
        }, 200);
    },
      beforeMount() {
      var _this = this;
      window.onresize = () => {
        return (() => {
          if (this.queryType == false) {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            _this.curHeight = h - 266; //减去页面上固定高度height
          } else {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            _this.curHeight = h - 220; //减去页面上固定高度height
          }
        })();
      };
    },
    comeIn() {
      console.log("222");
      var h =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 220; //减去页面上固定高度height
    },
  },
};
</script>
 <style scoped>
.el-footerBox {
  height: 50px !important;
  line-height: 50px !important;
  border-top: 1px solid #eeeeee;
}

/deep/ .el-dialog__header {
  border: 1px solid #eeeeee !important;
  padding: 15px !important;
}

/deep/ .el-dialog__body {
  padding: 0px 20px !important;
}

.popup_content {
  padding-bottom: 0px !important;
}
.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/.el-header {
  padding: 10px;
  /* height: 100% !important; */
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
}
.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409eff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.report_header_date {
  margin-left: 10px;
  width: 250px;
  margin-top: 5px;
}
.report_header_query {
  margin-left: 10px;
  width: 180px;
  margin-top: 5px;
}
</style>
